<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <jsp:include page="/resources/inc/head.jsp" />
    <link href="${basePath}/resources/zheng-admin/plugins/zTree_v3/css/demo.css" rel="stylesheet"/>
</head>
<body>
<script>
    var valueDiv = '<div class="layui-form-item" name="value_div">' +
            '<label class="layui-form-label">可选值</label>' +
            '<div class="layui-input-inline">' +
            '<input type="text" name="params" lay-verify="required" autocomplete="off" placeholder="请输入可选值"class="layui-input">' +
            '</div>' +
            '<a onclick="deleteDiv(this)" href="javascript:void(0);">' +
            '<i class="layui-icon" style="font-size:25px;color:black;">&#xe640;</i>' +
            '</a>' +
            '</div>';
    var plus = ' <a id="add_a" onclick="addDiv()" href="javascript:void(0);">' +
            ' <i class="layui-icon" style="font-size: 25px; color: black;">&#xe654;</i>' +
            ' </a>';
    var addDiv = function () {
        $("#add_a").before(valueDiv);
    };
    var deleteDiv = function (a) {
        var length = $("div [name='value_div']").length;
        if (length == 1) {
            layer.msg("最少有一个可选值", {icon: 5});
        } else {
            $($(a).parent()).remove();
        }
    };
    var initAddDiv = function () {
        var length = $("#value_div").find("#add_a").length;
        if (length < 1) {
            removeAddDiv();
            $("#value_div").append(plus);
            addDiv();
        }
    }
    var removeAddDiv = function () {
        $("#value_div").empty();
    }
</script>
<form class="layui-form layui-form-pane" id="_form">
    <div class="layui-form-item">
        <label class="layui-form-label">参数名称</label>
        <div class="layui-input-block">
            <input type="text" name="paramName" lay-verify="required" autocomplete="off" placeholder="请输入参数名称"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">参数类型</label>
        <div class="layui-input-inline">
            <select name="type" lay-filter="type">
                <c:forEach items="${paramTypes}" var="paramType">
                    <option value="${paramType.key}" >${paramType.value}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <div id="value_div">

    </div>
    <div class="layui-form-item" style="margin-top: 50px;">
        <div class="layui-input-block" style="float: right">
            <button class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
        </div>
    </div>
</form>
<jsp:include page="/resources/inc/footer.jsp" />
<script>
    var productCategoryId = "${productCategoryId}";
    $(function () {
        layui.use('form', function () {
            var form = layui.form;
            form.on('select(type)', function(data){
                var value = data.value;
                if(value == 1 || value == 2){
                    initAddDiv();
                }else{
                    removeAddDiv();
                }
            });
        });
        var url = "${basePath}/manage/product/param/create";
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        commonSubmit(url, "sub", index);
    });

    var getFormData = function () {
        var inputs = $("input[name='params']");
        var param = [];
        for (var i = 0; i < inputs.length; i++) {
            param.push(inputs[i].value);
        }
        var paramName = $("input[name='paramName']").val();
        var type = $("select[name='type']").val();
        var data = {categoryId: productCategoryId, paramName: paramName, param: JSON.stringify(param),type:type};
        return JSON.stringify(data);
    }
</script>
</body>
</html>
